<template>
  <div>
    <div :class="['header', navFixed ? 'fixed' : '']">
      <div class="left">
        <img style="width: 40px; margin: 0 10px" src="@/assets/icon_01.png" />
        <span style="color: #5E6464;font-size:24px">广西铝工业互联网平台</span>
      </div>
      <div ref="nav" class="nav-wrap">
        <div class="nav">
          <template v-for="(item, index) in nav">
            <el-popover
              v-if="item.menus && item.menus.mode === 'complex'"
              popper-class="custom-popover"
              placement="bottom"
              trigger="hover"
              :key="index"
            >
              <div class="custom-menus">
                <div class="custom-menus__nav">
                  <div
                    v-for="(nav, i) in item.menus.nav"
                    :key="i"
                    :class="[
                      'custom-menus__nav--item',
                      nav.active ? 'active' : '',
                    ]"
                    @mouseenter="handleMouseenter(item.menus.nav, nav)"
                  >
                    <span>{{ nav.label }}</span>
                  </div>
                </div>
                <div
                  v-for="(nav, i) in item.menus.nav"
                  :key="i"
                  v-show="nav.active"
                  class="custom-menus__list"
                >
                  <div
                    v-for="(group, j) in nav.groups"
                    :key="j"
                    class="custom-menus__list--group"
                  >
                    <h2 class="custom-menus__list--group-title">
                      {{ group.groupName }}
                    </h2>
                    <span
                      v-for="(groupItem, k) in group.children"
                      :key="k"
                      class="custom-menus__list--group-item"
                      @click="navigateTo(groupItem.route)"
                      >{{ groupItem.label }}</span
                    >
                  </div>
                </div>
              </div>
              <div
                slot="reference"
                :class="['nav-item', item.active ? 'active' : '']"
              >
                {{ item.title }}
              </div>
            </el-popover>
            <el-dropdown
              v-else-if="item.menus && item.menus.mode === 'simple'"
              :key="index"
              @command="handleDropdownClick"
            >
              <div
                :class="['nav-item', item.active ? 'active' : '']"
              >
                {{ item.title }}
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(nav, i) in item.menus.nav"
                  :key="i"
                  :command="nav.route"
                  >{{ nav.label }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
            <div
              v-else
              :key="index"
              :class="['nav-item', item.active ? 'active' : '']"
              @click="navigateTo(item.route)"
            >
              {{ item.title }}
            </div>
          </template>
        </div>
      </div>
      <div class="right">
        <template v-if="isLogin">
          <el-dropdown>
            <div style="display:flex;align-items: center;">
              <img src="@/assets/vatar.png"  style="width:36px;margin-right: 10px;"  />
              <div  class="right_user">
                <!-- 您好， -->
                {{userName}}
              </div>
            </div>  
            <el-dropdown-menu slot="dropdown">
               <el-dropdown-item @click.native="navigateTo('userCenter')">用户中心</el-dropdown-item>
              <el-dropdown-item @click.native="hadnleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- <span class="login_user">您好，{{userName}}</span>
          <span class="regist_user" @click="hadnleLogout">退出登录</span> -->
        </template>
        <template v-else>
          <span class="login" @click="toLogin">登录</span>
          <span class="regist" @click="toRegister">注册</span>
        </template>
      </div>
    </div>
    <!-- <el-dialog title="感谢联系铝工业互联平台" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="form">
        <el-form-item label="咨询类型" :label-width="formLabelWidth">
          <el-select v-model="form.prop1" style="width:380px">
            <el-option label="方案咨询" value="value1"></el-option>
            <el-option label="优惠活动" value="value2"></el-option>
            <el-option label="售后服务" value="value3"></el-option>
            <el-option label="商务合作" value="value4"></el-option>
            <el-option label="其他" value="value5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="咨询内容" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="form.prop2"
            ></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.prop3">
          </el-input>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input v-model="form.prop4">
          </el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.prop5">
          </el-input>
        </el-form-item>
        <el-form-item label="所在行业" :label-width="formLabelWidth">
          <el-select v-model="form.prop6" style="width:380px">
            <el-option label="政府" value="value1"></el-option>
            <el-option label="教育" value="value2"></el-option>
            <el-option label="医疗" value="value3"></el-option>
            <el-option label="传媒" value="value4"></el-option>
            <el-option label="金融" value="value5"></el-option>
            <el-option label="互联网" value="value6"></el-option>
            <el-option label="IT" value="value7"></el-option>
            <el-option label="制造" value="value8"></el-option>
            <el-option label="能源" value="value9"></el-option>
            <el-option label="化工" value="value10"></el-option>
            <el-option label="汽车" value="value11"></el-option>
            <el-option label="物流" value="value12"></el-option>
            <el-option label="农业" value="value13"></el-option>
            <el-option label="建筑" value="value14"></el-option>
            <el-option label="服务" value="value15"></el-option>
            <el-option label="贸易" value="value16"></el-option>
            <el-option label="其他" value="value17"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: "DashboardHeader",
  watch: {
    $route: {
      handler(route) {
        this.setCurrentNav(route);
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    ...mapGetters(['isLogin', 'userName'])
  },
  data() {
    return {
      navFixed: false,
      nav: [
        {
          title: "首页",
          active: false,
          model: "home",
          route: "home",
          // bg: require('@/assets/header-bg.jpg'),
          desc: "",
        },
        {
          title: "新闻中心",
          active: false,
          model: "news",
          route: "news",
          // bg: require('@/assets/2-1.png'),
          desc: "",
        },
        {
          title: "解决方案",
          active: false,
          model: "solution",
          // route: 'solution',
          // bg: require('@/assets/2-1.png'),
          desc: "",
          menus: {
            mode: "complex",
            nav: [
              {
                label: "通用方案",
                active: true,
                groups: [
                  {
                    groupName: "生产制造",
                    children: [
                      {
                        label: "热成像工业视觉监测",
                        // route: "solution1",
                      },
                      {
                        label: "AIaaS人工智能平台",
                        // route: "solution2",
                      },
                    ],
                  },
                  {
                    groupName: "基础方案",
                    children: [
                      {
                        label: "物联网平台解决方案",
                        route: "IotPlatform",
                      },
                      {
                        label: "应用性能调试优化",
                      },
                    ],
                  },
                  {
                    groupName: "数字化转型",
                    children: [
                      // {
                      //   label: "软硬件一体化集装箱式解决方案",
                      // },
                      {
                        label: "智慧供应链",
                        route: "SupplyChain",
                      },
                      {
                        label: "智慧物流",
                        route: "SmartLogistics",
                      },
                      {
                        label: "智慧零售",
                        route: "SmartRetail",
                      },
                      {
                        label: "智慧消防",
                        route: "SmartFire",
                      },
                    ],
                  },
                  {
                    groupName: "公共服务",
                    children: [
                      {
                        label: "智慧党建",
                        route: "SmartPartyBuilding",                      
                      },
                      {
                        label: "智慧社区",
                        route: "SmartCommunity"
                      },
                    ],
                  },
                  {
                    groupName: "服务咨询评估",
                    children: [
                      {
                        label: "渗透测试服务",
                        route: "Penetration"
                      },
                      {
                        label: "远程安全服务",
                      },
                      {
                        label: "应急响应服务",
                      },
                      {
                        label: "安全评估评测服务",
                      },
                    ],
                  },
                  {
                    groupName: "智慧园区",
                    children: [
                      {
                        label: "产业园区",
                        route: "IndustryArea",
                      },
                      {
                        label: "办公园区",
                        route: "OfficePark"
                      },
                      {
                        label: "智慧工地",
                        route: "solution3",
                      },
                    ],
                  },
                  {
                    groupName: "云端服务",
                    children: [
                      {
                        label: "云迁移",
                        route: "solution1",
                      },
                      {
                        label: "工业电商平台",
                        route: "solution2",
                      },
                    ],
                  },
                  {
                    groupName: "Scada",
                    children: [
                      {
                        label: "工业互联网Scada",
                        route: "FuxaScada",
                      },
                    ],
                  },
                ],
              },
              {
                label: "物联网方案",
                active: false,
                groups: [
                  {
                    groupName: "工业互联方案",
                    children: [
                      {
                        label: "运输管理",
                        route: "",
                      },
                      {
                        label: "智慧机床管理",
                        route: "",
                      },
                      {
                        label: "在线监测系统",
                        route: "",
                      },
                      {
                        label: "电梯应急处理",
                        route: "",
                      },
                      {
                        label: "锅炉安全运行",
                        route: "",
                      },
                      {
                        label: "智慧能源管理",
                        route: "",
                      },
                      {
                        label: "LNG产业互联网",
                        route: "",
                      },
                      {
                        label: "移动式压力容器",
                        route: "",
                      },
                      {
                        label: "变电站集控运维",
                        route: "",
                      },
                      {
                        label: "转动设备健康监测",
                        route: "",
                      },
                      {
                        label: "环保设备远程运维",
                        route: "",
                      },
                    ],
                  },
                ],
              },
              {
                label: "行业方案",
                active: false,
                groups: [
                  {
                    groupName: "能源行业解决方案",
                    children: [
                      {
                        label: "空压机节能改造",
                        route: "",
                      },
                      {
                        label: "智慧能源管理",
                        route: "",
                      },
                      {
                        label: "新机械加工",
                        route: "",
                      },
                    ],
                  },
                ],
              },
            ],
          },
        },
        {
          title: "供需大厅",
          active: false,
          model: "supplyDemand",
          route: "supplyDemand",
          // bg: require('@/assets/2-1.png'),
          desc: "",
        },
        {
          title: "生态伙伴",
          active: false,
          // model: 'partner',
          // route: 'partner',
          // bg: require('@/assets/2-1.png'),
          desc: "",
          menus: {
            mode: "simple",
            nav: [
              // {
              //   label: '伙伴入驻',
              //   route: 'partner1',
              // },
              {
                label: "伙伴中心",
                route: "partner2",
              },
              // {
              //   label: "方案发布",
              //   route: "partner3",
              // },
            ],
          },
        },
        {
          title: "支持与服务",
          active: false,
          model: "service",
          route: "service",
          // bg: require('@/assets/2-1.png'),
          desc: "",
        },
        {
          title: "用户中心",
          active: false,
          model: "userCenter",
          route: "userCenter",
          // bg: require('@/assets/2-1.png'),
          desc: "",
        },
        {
          title: "业务平台",
          active: false,
          // model: "businessPlatform",
          // route: "businessPlatform",
          // bg: require('@/assets/2-1.png'),
          desc: "",
          menus: {
            mode: "simple",
            nav: [
              // {
              //   label: '伙伴入驻',
              //   route: 'partner1',
              // },
              {
                label: "Scada",
                route: 'http://122.9.123.92:1881/'
              }
            ],
          }
        },
      ],
      // dialogFormVisible: false,
      // formLabelWidth: '80px',
      // form: {
      //   prop1: '',
      //   prop2: '',
      //   prop3: '',
      //   prop4: '',
      //   prop5: '',
      //   prop6: '',
      // },
    };
  },
  methods: {
    ...mapActions('user', ['logout']),
    toLogin () {
      // this.dialogFormVisible = true
      this.navigateTo('loginForm')
    },
    toRegister () {
      this.navigateTo('registerForm')
    },
    handleScroll (e) {
      let scrollTop = e.target.documentElement.scrollTop || e.target.body.scrollTop;
      let offsetTop = this.$refs.nav.offsetTop
      if (offsetTop - scrollTop < 0) {
        this.navFixed = true
      } else {
        this.navFixed = false
      }
    },
    setCurrentNav(route) {
      let fullPath = route.fullPath;
      for (let i = 0; i < this.nav.length; i++) {
        if (fullPath.indexOf(this.nav[i].model) >= 0) {
          this.$set(this.nav[i], "active", true);
        } else {
          this.$set(this.nav[i], "active", false);
        }
      }
    },
    navigateTo(route, params) {
      if (this.$route.name === route) return;
      this.$router.push({
        name: route,
        query: params,
      });
    },
    handleMouseenter(menus, menu) {
      menus.forEach((item) => {
        this.$set(item, "active", item.label === menu.label);
      });
    },
    handleDropdownClick(command) {
      if (command.indexOf('http://') < 0 && command.indexOf('https://') < 0) {
        this.navigateTo(command)
      } else {
        window.open(command)
      }
    },
    hadnleLogout () {
       this.$confirm('确认退出吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.logout().then(() => {
          this.$message({
            type: 'success',
            message: '退出成功!'
          })
          this.toLogin()
        })
      })
    }
  },
  // mounted () {
  //   window.addEventListener('scroll', this.handleScroll, true)
  // },
  // destroyed () {
  //   document.removeEventListener('scroll', this.handleScroll)
  // }
};
</script>

<style lang="less" scoped>
@import "~@/style/variables.less";

.header {
  width: 100%;
  min-width: @main_area_width;
  background: transparent;
  height: 80px;
  // padding: 0 20px 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // 浮动
  // &.fixed {
  //   position: fixed;
  //   top: 0;
  //   z-index: 999;
  //   // background-color: #fff;
  // }
  .left {
    @align_center();
    cursor: pointer;
    font-weight: bold;
  }
  .right {
    font-weight: bold;
    display: flex;
    align-items: center;
    font-size: 15px;
    .right_user{
      margin-right: 20px;
      cursor: pointer;
      color: red;
      font-weight:normal;
    }
    .login {
      cursor: pointer;
      color: #5E6464;
      margin-right: 10px;
    }
    .regist {
      cursor: pointer;
      display: inline-block;
      // width: 60px;
      height: 25px;
      padding: 0 10px;
      text-align: center;
      margin: auto;
      @align_center();
      // line-height: 30px;
      margin-right: 10px;
      background: #5E6464;
      // border-radius: 5px;
      color: #fff;
    }
  }
}

.nav-wrap {
  flex: 1;
  transition: all 0.6s linear;
  padding: 10px 36px;
  .nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    .nav-item {
      @align_center();
      cursor: pointer;
      // flex: 1;
      padding: 0 26px;
      color: #333;
      font-size: 15px;
      height: 40px;
      // font-weight: bold;
      // font-family: 宋体;
      &.active,
      &:hover {
        color: @theme_color;
      }
    }
  }
}

.custom-menus {
  display: flex;
  .custom-menus__nav {
    background-color: rgb(242, 242, 242);
    padding: 20px 0;
    .custom-menus__nav--item {
      @align_center();
      padding: 10px 20px;
      min-width: 150px;
      position: relative;
      font-size: 16px;
      cursor: pointer;
      &.active {
        color: @theme_color;
        font-weight: bold;
        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 5px;
          height: 16px;
          background-color: @theme_color;
        }
      }
    }
  }
  .custom-menus__list {
    padding: 20px 30px;
    background-color: #fff;
    max-height: 400px;
    display: flex;
    // flex-direction: column;
    flex-wrap: wrap;
    writing-mode: vertical-lr;
    .custom-menus__list--group {
      margin-right: 50px;
      writing-mode: horizontal-tb;
      .custom-menus__list--group-title {
        padding: 10px 0;
        font-weight: bold;
        font-size: 16px;
        color: #333;
      }
      .custom-menus__list--group-item {
        display: block;
        cursor: pointer;
        font-size: 14px;
        line-height: 28px;
      }
    }
  }
}
</style>

<style>
.el-popover.custom-popover {
  padding: 0;
}
</style>
